<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box {
			width: 400px;
			height: 400px;
			border: 1px solid red;
			
			/* 设置父元素为伸缩盒子 */
			display: flex;

			/* 设置子元素在主轴方向的对齐方式 */
			/* justify-content: flex-start;
			justify-content: flex-end;
			justify-content: center;
			justify-content: space-between;
			justify-content: space-around; */


			/* 设置主轴方向 */
			/* flex-direction: row;
			flex-direction: row-reverse;
			flex-direction: column;
			flex-direction: column-reverse; */


			/* 设置侧轴对齐方式 */
			/* align-items: flex-start;
			align-items: flex-end;
			align-items: center;
 */
			/* 默认值 */
			/* align-items: stretch; */


			flex-wrap: wrap;


			/* 设置换行后的对齐方式 */
			align-content: flex-start;
			align-content: flex-end;
			align-content: center;
			align-content: space-around;
			align-content: space-between;
			/* 换行后的默认值 */
			align-content: stretch;
		}
		
		.one {
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 2px;

		}
		.two {
			width: 100px;
			height: 100px;
			background-color: pink;
			margin: 2px;
		}

		.three {
			width: 100px;
			height: 100px;
			background-color: yellowgreen;
			margin: 2px;
		}
	</style>
</head>
<body>
	
	 <div class="box">
	 	 <div class="one"></div>
	 	 <div class="two"></div>
	 	 <div class="three"></div>
	 	 <div class="three"></div>
	 	 <div class="three"></div>
	 	
	 </div>
</body>
</html>